<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>首页</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ant-design-vue@1.3.5/dist/antd.min.css">
    <!--<script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.min.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ant-design-vue@1.3.5/dist/antd.min.js"></script>
    <!--<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/qs@6.5.2/dist/qs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>
    <style type="text/css">
        #components-layout-demo-top-side-2 .logo {
            width: 120px;
            height: 31px;
            background: rgba(255,255,255,.2);
            margin: 16px 28px 16px 0;
            float: left;
        }
    </style>
</head>
<body>
    <div id="app">
        <a-layout id="components-layout-demo-top-side">
            <a-layout-header class="header">
                <div class="logo" />
                <a-menu
                        theme="dark"
                        mode="horizontal"
                        :defaultSelectedKeys="['2']"
                        :style="{ lineHeight: '64px' }"
                >
                    <a-menu-item key="1">nav 1</a-menu-item>
                    <a-menu-item key="2">nav 2</a-menu-item>
                    <a-menu-item key="3">nav 3</a-menu-item>
                </a-menu>
            </a-layout-header>
            <a-layout-content>
                <a-table :columns="columns" :dataSource="tableData" size="middle" />
            </a-layout-content>
        </a-layout>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.1.0/babel.min.js"></script>
<script type="text/javascript">
    var dataSource = [{
        key: '1',
        name: '胡彦斌',
        age: 32,
        address: '西湖区湖底公园1号'
    }, {
        key: '2',
        name: '胡彦祖',
        age: 42,
        address: '西湖区湖底公园1号'
    }];

    var columns = [{
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
    }, {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
    }, {
        title: '住址',
        dataIndex: 'address',
        key: 'address',
    }];
    new Vue({
        el: '#app',
        data: function(){
            return {
                columns: columns,
                tableData: dataSource,

                selectedRowKeys: [], // Check here to configure the default column
            }
        },
        mounted: {

        },
        method: {
            // rowSelection() {
            //     const { selectedRowKeys } = this;
            //     return {
            //         selectedRowKeys,
            //         onChange: this.onSelectChange,
            //         hideDefaultSelections: true,
            //         selections: [{
            //             key: 'all-data',
            //             text: 'Select All Data',
            //             onSelect: () => {
            //                 this.selectedRowKeys = [...Array(46).keys()]; // 0...45
            //             },
            //         }, {
            //             key: 'odd',
            //             text: 'Select Odd Row',
            //             onSelect: (changableRowKeys) => {
            //                 let newSelectedRowKeys = [];
            //                 newSelectedRowKeys = changableRowKeys.filter((key, index) => {
            //                     if (index % 2 !== 0) {
            //                         return false;
            //                     }
            //                     return true;
            //                 });
            //                 this.selectedRowKeys = newSelectedRowKeys;
            //             },
            //         }, {
            //             key: 'even',
            //             text: 'Select Even Row',
            //             onSelect: (changableRowKeys) => {
            //                 let newSelectedRowKeys = [];
            //                 newSelectedRowKeys = changableRowKeys.filter((key, index) => {
            //                     if (index % 2 !== 0) {
            //                         return true;
            //                     }
            //                     return false;
            //                 });
            //                 this.selectedRowKeys = newSelectedRowKeys;
            //             },
            //         }],
            //         onSelection: this.onSelection,
            //     }
            // },
            // onSelectChange (selectedRowKeys) {
            //     console.log('selectedRowKeys changed: ', selectedRowKeys);
            //     this.selectedRowKeys = selectedRowKeys
            // },
        }
    })
</script>
</html>